<template>
  <div class="gratitude-ward">
    <c-title :text="titleName"></c-title>
    <div class="member">
      <div class="avatar">
        <img :src="info.avatar" class="full" />
      </div>
      <div class="info">
        <div class="nickname">{{info.nickname}}</div>
        <span class="level" v-if="info.level">{{info.level}}</span>
      </div>
      <div class="total-box">
        <div class="text">累计奖励金额：</div>
        <div class="money">{{ $i18n.t('money') }}{{info.all || "0.00"}}</div>
      </div>
    </div>
    <van-tabs v-model="activeName">
      <van-tab name="first" title="奖励记录"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="list-item" v-for="(item,i) in dataList" :key="i">
        <div class="details">
          <div class="ID">ID：{{item.id}}</div>
          <div class="time">{{item.created_at}}</div>
        </div>
        <div class="money">{{ $i18n.t('money') }}{{item.amounts}}</div>
      </div>
    </div>
    <yz-blank :datas="dataList" text="暂无奖励记录"></yz-blank>
    <div style="height: 40rpx;"></div>
  </div>
</template>
<script>
  import yz_blank from "@/components/ui_components/yz_blank";
  import {scrollMixin} from "@/utils/mixin.js";
  export default{
    mixins:[scrollMixin],
    components:{"yz-blank":yz_blank},
    data(){
      return{
        info:{},
        activeName:"first",
        dataList:[],
        isLoadMore:true,
        page:1,
        titleName:"感恩奖"
      }
    },
    created(){
      this.getdata();
    },
    methods:{
      initData(){
        this.isLoadMore = false;
        this.page = 1;
        this.dataList = [];
        this.info = {};
        this.activeName = "first";
        this.titleName = "感恩奖";
      },
      setTsLoadMore(bool){
        this.isLoadMore = !bool;
      },
      getdata(){
        this.initData();
        $http.post("plugin.distribution-appreciation.frontend.controllers.center.index",{page:1},"正在加载中...").then(({result,msg,data})=>{
          if(result){
            this.info = data.info;
            this.dataList = data.list.data;
            this.titleName = data.info.plugin_name || "感恩奖";
            this.fun.setWXTitle(this.titleName);
            this.setTsLoadMore(this.page == data.list.last_page);
          }else this.$toast(msg);
        })
      },
      getMoreData(){
        if(this.isLoadMore){
          let page = this.page + 1;
          this.isLoadMore = false;
          $http.post("plugin.distribution-appreciation.frontend.controllers.center.index",{page},"正在加载中...").then(({result,msg,data})=>{
            if(result){
              this.page = page;
              this.dataList = this.dataList.concat(data.list.data);
              this.setTsLoadMore(this.page == data.list.last_page);
            }else this.$toast(msg);
          })
        }else this.$toast("没有更多数据了");
      },
    }
  }
</script>
<style scoped lang="scss">
  .gratitude-ward{
    text-align:left;
    /deep/ .van-tabs{padding:0 1rem;}
    /deep/ .van-tabs__nav{border-radius:.4rem .4rem 0 0;}
    .full{width:100%;height:100%;}
    .money{color:#F15656;}
    .member{
      width:100%;
      height:7rem;
      background:#F15656;
      display:flex;
      align-items:center;
      padding:0 1rem;
      position:relative;
      margin-bottom:2rem;
      .avatar{width:3rem;height:3rem;border-radius:50%;overflow:hidden;margin:0 1rem;}
      .info{
        color:#fff;line-height:1.5rem;
        .level{padding:.1rem .4rem;background:#EDAB83;border-radius:.4rem;}
      }
      .total-box{
        width:calc(100% - 2rem);position:absolute;bottom:-1.5rem;height:3rem;background:#fff;border-radius:.5rem;display:flex;align-items:center;padding: 0 1rem;
        .text{color:#101010;flex:1;}
      }
    }
    .list{
      width:calc(100% - 2rem);
      margin: 0 auto;
      background: #fff;
      .list-item{
        display:flex;padding:0 1rem;line-height:1.8rem;align-items: center;border-bottom:1px solid #F9F9F9;
        .details{
          flex:1;font-size:.875rem;color:#101010;
          .time{color:#867e7e;font-size:.75rem;}
        }
      }
    }
  }
</style>